<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>gua mario</title>
</head>
<body>
    <canvas id="id-canvas" width="1500" height="800"></canvas>
 <style media="screen">
        canvas {
            border: 1px black solid;
        }
    </style>
    <h3></h3>
    <div class="gua-controls">
        <button data-action='change_offset' data-offset="-1024">-1024</button>
        <button data-action="change_offset" data-offset="1024">1024</button>
        <button data-action="change_offset" data-offset="16">16</button>
        <button data-action="change_offset" data-offset="-16">-16</button>
    </div>
   <script src="marios-data.js"></script> 
<script>

const  e = sel => document.querySelector(sel)
const log = console.log.bind(console)

const ajax = request => {
    let r = new XMLHttpRequest()
    r.open('GET', request.url, true)
    r.responseType = 'arraybuffer'
    r.onreadystatechange = event => {
        if (r.readyState == 4) {
            request.callback(r.response)
        }
    }
    r.send()
}


const drawBlock = (context, data, x, y, pixelWidth) => {
    const colors = [
        'white',
        '#D91F03', 
        '#F79232',
        '#816A00',
    ]
    let w = pixelWidth
    let h = pixelWidth
    let blockSize = 8
    for (let i = 0; i < blockSize; i++) {
        let p1 = data[i]
        let p2 = data[i + 8]
        for (let j = 0; j < blockSize; j++) {
            let c1 = (p1 >> (7 - j)) & 0b00000001
            let c2 = (p2 >> (7 - j)) & 0b00000001
            let pixel = (c2 << 1) + c1
            let color = colors[pixel]
            context.fillStyle = color
            let px = x + j * w
            let py = y + i * h
            context.fillRect(px, py, w, h)
        }
        
    }
    
}
class Nes {
    constructor(game) {
        this.game = game 
        this.data = mariosData
        this.setUp()
    }
    setUp() {
        this.context = this.game.context
        this.offset = 36880 
        this.pixelSize = 8
        this.pixelWidth = 10
        this.numberOfBytesPerBlock = 16
        // 0 的起始位置
        let offset = this.offset
        this.data = this.data.slice(offset)

        this.x = 200
        this.y = 200
    }
    drawNumber(number) {
        let index = number * this.numberOfBytesPerBlock
        var data = this.data.slice(index)
        this.drawBlock(data)
    }
    drawBlock(data){
        const colors = [
            'white',
            '#D91F03', 
            '#F79232',
            '#816A00',
        ]
        let w = this.pixelWidth
        let h = this.pixelWidth
        let blockSize = 8
        for (let i = 0; i < blockSize; i++) {
            let p1 = data[i]
            let p2 = data[i + 8]
            for (let j = 0; j < blockSize; j++) {
                let c1 = (p1 >> (7 - j)) & 0b00000001
                let c2 = (p2 >> (7 - j)) & 0b00000001
                let pixel = (c2 << 1) + c1
                let color = colors[pixel]
                if (color == 'white') {
                    continue
                }
                this.context.fillStyle = color
                let px = this.x + j * w
                let py = this.y + i * h
                this.context.fillRect(px, py, w, h)
            }
            
        }
    }

    update() {
    }
    draw() {

    }
}

const drawNes = bytes => {
    let canvas = e('#id-canvas') 
    let context = canvas.getContext('2d')

    let blockSize = 8
    let pixelSize = 8
    let pixelWidth = 10
    let numberOfBytesPerBlock = 16

    for (let i = 0; i < blockSize; i++) {
        for (let j = 0; j < blockSize; j++) {
            // 算出 bytes
            let x = j * pixelSize * pixelWidth
            let y = i * pixelSize * pixelWidth
            let index = config.offset + (i * 8 + j) * numberOfBytesPerBlock
            drawBlock(context, bytes.slice(index), x, y, pixelWidth)
        }
        
    }
}

const actions = {
    change_offset(offset){
        config.offset += offset
        e('h3').innerHTML = config.offset
        drawNes(mariosData)
    }

}

const bindEvents = () => {
    e(".gua-controls").addEventListener('click', event => {
        let action = event.target.dataset.action
        let offset = Number(event.target.dataset.offset)
        actions[action] && actions[action](offset)
    })
}

const config = {
    offset: 36880,
}

const __main = () => {
    // let request = {
    //     url: ' http://localhost:8080',
    //     callback(r) {
    //         let bytes = new Uint8Array(r)
    //         log('bytes', bytes)
    //     },
    // }
    // ajax(request)

    // load mario data by python
    log("marios", mariosData)
    // drawNes(mariosData)
    // bindEvents()
    let nes = new Nes(mariosData)
    nes.drawNumber(0)

}

__main()
</script>
</body>
</html>